import { Button, Card, Input, Form, Upload, Radio,Checkbox,Col,Select} from 'antd';
import { connect} from 'umi';
import React,{useEffect} from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { LoadingOutlined,PlusOutlined} from '@ant-design/icons';
import styles from './style.less';
import db from '@/utils/localstorage';
import { upload } from './service';

const FormItem = Form.Item;
const { TextArea } = Input;

const BasicForm = props => {
  const { submitting,dispatch,shopList,roleList,currentEmployee,gdWageList,saleWageList,privateWageList} = props;
  const [form] = Form.useForm();
  const [imageUrl, setImageUrl] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [allowLogin, setAllowLogin] = React.useState();

  useEffect(() => {
    if (dispatch) {
        dispatch({
            type: 'cubeEmployee/fetchEmployee',
            payload:{
                id:props.match.params.id
            }
          }).then(()=>{
              form.resetFields()
          })
        dispatch({
            type: 'cubeEmployee/fetchShopList',
            payload:{
              userId:db.get("user").userId
            }
          })
          dispatch({
            type: 'cubeEmployee/fetchRoleList',
            payload:{}
          })
          dispatch({
            type: 'cubeEmployee/gdWageList',
            payload:{}
          })
          dispatch({
            type: 'cubeEmployee/saleWageList',
            payload:{}
          })
          dispatch({
            type: 'cubeEmployee/privateWageList',
            payload:{}
          })
     }
   }, []);
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = async() => {
    const values = await form.validateFields();
    const { dispatch } = props;
    if(imageUrl){
      values.headPortrait=imageUrl
    }
    dispatch({
      type: 'cubeEmployee/update',
      payload: {
        ...currentEmployee,
        ...values
      },
    });
  };

  const customRequest = (detail) => {
    setLoading(true)
    const formData = new FormData();
    formData.append('file',detail.file);
    upload(formData).then((result)=>{
      setLoading(false)
      if(result.code==0){
        setImageUrl(result.data)
      }
    })
}
 /**
   * 选择是否允许登录
   * @param {*} value 
   */
  const allowLoginChange = e =>{
    setAllowLogin(e.target.value)
  }

  const uploadButton = <><div>{loading?<LoadingOutlined />:<PlusOutlined />}<div className="ant-upload-text">上传</div></div></>
  
  return (
    <PageHeaderWrapper>
      <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
          initialValues={currentEmployee}
        >
      <Card bordered={false} title="基本设置">
        
          <FormItem
            {...formItemLayout}
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入姓名',
              },
            ]}
          >
            <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="类别"
            name="empType"
            rules={[
              {
                required: true,
                message: '请选择类别',
              },
            ]}
          >
              <Select style={{ width: '100%' }} placeholder="请选择">
                {
                  db.get("dictTypeList")&&db.get("dictTypeList")["emp_type"].map((item,index)=> <Select.Option value={item.value} key={index}>{item.label}</Select.Option>)
                }
              </Select>
          </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="头像"
                  name="headPortrait"
                >
                <Upload
                  name="file"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  customRequest={customRequest}
                >
                  {imageUrl ? <img src={`http://mmm.supercube.vip/${imageUrl}`} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload>
                &nbsp;&nbsp;<span style={{fontSize:12}}>建议正方形图片，大小不超过2M。支持格式jpg、jpeg、gif、png</span>
          </FormItem>
     
          <FormItem
            {...formItemLayout}
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: '请选择性别',
              },
            ]}
          >
            <Radio.Group>
                <Radio value={1}>
                男
                </Radio>
                <Radio value={2}>
                女
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="手机"
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
            ]}
          >
           <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="所属场馆"
            name="correlationVenueIdList"
            rules={[
              {
                required: true,
                message: '请选择所属场馆',
              },
            ]}
          >
              <Checkbox.Group>
                  {
                      shopList&&shopList.map((item,index)=><Checkbox value={item.id} key={index}>{item.name}</Checkbox>)
                  }
            </Checkbox.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="角色"
            name="roleIds"
            rules={[
              {
                required: true,
                message: '请选择角色',
              },
            ]}
          >
              <Checkbox.Group>
                {
                      roleList&&roleList.map((item,index)=>
                      <Col span={24}><Checkbox value={item.roleId} key={index}>{item.roleName}</Checkbox></Col>
                      )
                  }
            </Checkbox.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="是否允许登录"
            name="allowLogin"
            rules={[
              {
                required: true,
                message: '请选择是否允许登录',
              },
            ]}
          >
            <Radio.Group onChange={allowLoginChange}>
                <Radio value="1">
                是
                </Radio>
                <Radio value="2">
                否
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
              {...formItemLayout}
              label="用户名"
              name="username"
              extra="允许登录需填写用户，反之则不填"
            >
              <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="简介"
            name="briefIntroduction"
          >
            <TextArea rows={4} placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="备注"
            name="bz"
          >
            <TextArea rows={4} placeholder="请输入"/>
          </FormItem>
      </Card>
      <Card bordered={false} title="薪酬设置" style={{marginTop: 32}}>
          <FormItem
                {...formItemLayout}
                label="固定底薪"
                name={['empSalaryDesignDTO', 'basicSalaryId']}
              >
              <Select style={{ width: '100%' }} placeholder="请选择">
                {
                  gdWageList&&gdWageList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                }
              </Select>
          </FormItem>
          <FormItem
                {...formItemLayout}
                label="销售提成"
                name={['empSalaryDesignDTO', 'commissionSalaryId']}
              >
              <Select style={{ width: '100%' }} placeholder="请选择">
                {
                  saleWageList&&saleWageList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                }
              </Select>
          </FormItem>
          <FormItem
                {...formItemLayout}
                label="私教课费"
                name={['empSalaryDesignDTO', 'privateClassSalaryId']}
              >
              <Select style={{ width: '100%' }} placeholder="请选择">
                {
                  privateWageList&&privateWageList.map((item,index)=> <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                }
              </Select>
          </FormItem> 
      </Card>
      <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" onClick={onFinish} loading={submitting}>
             提交
            </Button>
            <Button
              style={{
                marginLeft: 8,
              }}
              onClick={()=>window.history.back()}
            >
              返回
            </Button>
          </FormItem>
        </Form>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading,cubeEmployee }) => ({
  submitting: loading.effects['cubeEmployee/add'],
  shopList:cubeEmployee.shopList,
  roleList:cubeEmployee.roleList,
  currentEmployee:cubeEmployee.currentEmployee,
  gdWageList:cubeEmployee.gdWageList,
  saleWageList:cubeEmployee.saleWageList,
  privateWageList:cubeEmployee.privateWageList
}))(BasicForm);
